<template>
  <div>
    <el-card shadow="never">
      <el-skeleton :loading="loading" animated>
        <el-row :gutter="16" justify="space-between">
          <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
            <div class="flex items-center">
              <el-avatar :src="avatar" :size="70" class="mr-16px">
                <img src="@/assets/imgs/avatar.gif" alt="" />
              </el-avatar>
              <div>
                <div class="text-20px">
                  {{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }}
                </div>
                <div class="mt-10px text-14px text-gray-500">
                  {{ t('workplace.toady') }}，20℃ - 32℃！
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-skeleton>
    </el-card>
  </div>
  <el-row class="mt-8px" :gutter="8" justify="start">
    <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24" class="mb-8px">
      <el-card shadow="never" class="mt-8px">
        <el-skeleton :loading="loading" animated>
          <el-card shadow="hover" class="mb-8px">
            <el-skeleton :loading="loading" animated>
              <Echart :options="upOptionsData" :height="300" />
            </el-skeleton>
          </el-card>
        </el-skeleton>
      </el-card>
    </el-col>
    <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24" class="mb-8px">
      <el-card shadow="never" class="mt-8px">
        <el-skeleton :loading="loading" animated>
          <el-card shadow="hover" class="mb-8px">
            <el-skeleton :loading="loading" animated>
              <Echart :options="fansOptions" :height="300" />
            </el-skeleton>
          </el-card>
        </el-skeleton>
      </el-card>
    </el-col>
  </el-row>
  <el-card shadow="never">
    <el-skeleton :loading="loading" animated>
      <el-card shadow="hover">
        <el-skeleton :loading="loading" animated>
          <Echart :options="startOptionsData" :height="600" />
        </el-skeleton>
      </el-card>
    </el-skeleton>
  </el-card>
  <el-card shadow="never">
    <el-skeleton :loading="loading" animated>
      <el-card shadow="hover">
        <el-skeleton :loading="loading" animated>
          <Echart :options="videoViewOptionsData" :height="1000" />
        </el-skeleton>
      </el-card>
    </el-skeleton>
  </el-card>
</template>
<script lang="ts" setup>
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'

import { useUserStore } from '@/store/modules/user'
import {fansOptions, startOptions, upOptions, videoViewOptions,} from './echarts-data'
defineOptions({ name: 'Home' })
import { DashboardApi } from '@/api/bilibili/dashboard'

const { t } = useI18n()
const userStore = useUserStore()
const loading = ref(true)
const avatar = userStore.getUser.avatar
const username = userStore.getUser.nickname
const upOptionsData = reactive<EChartsOption>(upOptions) as EChartsOption
const fansOptionsData = reactive<EChartsOption>(fansOptions) as EChartsOption
const startOptionsData = reactive<EChartsOption>(startOptions) as EChartsOption
const videoViewOptionsData = reactive<EChartsOption>(videoViewOptions) as EChartsOption
const queryParams = reactive({
  pageNo: 1,
  pageSize: 5,
})

/**
 * UP主类型占比图
 */
const getUpOptions = async () => {
  const data = await DashboardApi.getUpRatio();
  set(
      upOptionsData,
    'legend.data',
    data.map((v) => v.name)
  )
  upOptionsData!.series![0].data = data.map((v) => {
    return {
      name: v.name,
      value: v.value
    }
  })
}

/**
 * 粉丝排行换图
 */
const getFansOptions = async () => {
  const data = await DashboardApi.getUpFansRank();
  set(
      fansOptionsData,
      'legend.data',
      data.map((v) => v.name)
  )
  fansOptionsData!.series![0].data = data.map((v) => {
    return {
      name: v.name,
      value: v.value
    }
  })
}

/**
 * 获赞排行换图
 */
const getStartOptions = async () => {
  const data = await DashboardApi.getUpStartRank();
  set(
      startOptionsData,
      'legend.data',
      data.map((v) => v.name)
  )
  startOptionsData!.series![0].data = data.map((v) => {
    return {
      name: v.name,
      value: v.value
    }
  })
}

/**
 * 视频播放量图
 */
const getVideoViewOptions = async () => {
  const data = await DashboardApi.getVideoViewRank(queryParams);
  // 填充 yAxis 的 data
  videoViewOptionsData!.yAxis!.data = data.map(item => item.name);

  // 填充 series 的 data，包含 title 字段
  videoViewOptionsData!.series![0].data = data.map(item => ({
    name: item.name,
    title: item.title,
    value: item.value
  }));
}
const startUpdatingDataVideoViewOptionsData = () => {
  var intervalId = setInterval(async () => {
    if (queryParams.pageNo >= 4) {
      clearInterval(intervalId);
      return;
    }
    queryParams.pageNo++;
    // 随机生成新的数据
    const newData = await DashboardApi.getVideoViewRank(queryParams);

    // 获取现有的 yAxis 和 series 数据
    const existingYAxisData = videoViewOptionsData!.yAxis!.data;
    const existingSeriesData = videoViewOptionsData!.series![0].data;
    // 更新 yAxis 的 data
    newData.forEach(item => {
      if (!existingYAxisData.includes(item.name)) {
        existingYAxisData.push(item.name);
      }
    });
    // 更新 series 的 data，包含 title 字段
    newData.forEach(item => {
      const existingItemIndex = existingSeriesData.findIndex(dataItem => dataItem.name === item.name);
      if (existingItemIndex !== -1) {
        // 如果已存在，更新值
        existingSeriesData[existingItemIndex].value = item.value;
      } else {
        // 如果不存在，追加新数据
        existingSeriesData.push({
          name: item.name,
          title: item.title,
          value: item.value
        });
      }
    });
  }, 2000);
};

const getAllApi = async () => {
  await Promise.all([
    getUpOptions(),
    getFansOptions(),
    getStartOptions(),
    getVideoViewOptions(),
    startUpdatingDataVideoViewOptionsData(),
  ])
  loading.value = false
}

getAllApi()
</script>
